<template>
	<u-overlay :show="_showOverlay" z-index="1004">
		<view class="wrapper fboxCol Xcenter Ycenter">
			<view style="margin-bottom: 58rpx;">
				<view v-if="isPromotion" class="bg1 fboxCol Xcenter"
					:style="{'background-image': `url(${info.functionUrl})`}">
					<view class="show-box fboxCol Xcenter"></view>
					<image v-if="info.list" class="btn-img" :src="info.list[0].url" @tap="linkTo"></image>
				</view>
				<view class="box fboxCol Ycenter" style="position: relative;" v-else>
					<image class="bg" :src="info.functionUrl" mode="aspectFill"></image>
					<view class="content">
						<scroll-view class="maxHeight" scroll-y="true">
							<!-- <rich-text nodes="{{info.copywriting}}" space="nbsp"></rich-text> -->
						</scroll-view>
						<image class="btn-img" :src="info.list && info.list[0].url" @tap="onClick"></image>
					</view>
				</view>
			</view>
			<text class="bksCIcon bks-c-ziyuan34cha font56 color-fff" @tap="onClickHide"></text>
		</view>
	</u-overlay>
</template>

<script>
	import {
		bksFunctionInfo
	} from '@/api/bks.index.js'
	export default {
		props: {
			showOverlay: {
				type: Boolean,
				default: false
			},
			ident: { // 标识id
				type: String,
				default: 'POP0002'
			},
			isPromotion: { // 是否为促销弹窗
				type: Boolean,
				default: false
			}
		},
		watch: {
			'showOverlay'(data) { //单个监听
				if (data && !this.isPromotion) {
					this.getVipDetail()
				}
			}
		},
		data() {
			return {
				price: '',
				info: {},
				bks_bullet: []
			}
		},
		computed: {
			_showOverlay: {
				get() {
					return this.showOverlay
				},
				set(val) {
					this.$emit('update:showOverlay', val)
				}
			}
		},
		mounted() {
			const bks_bullet = uni.getStorageSync('bks_bullet') || '[]'
			this.bks_bullet = JSON.parse(bks_bullet)
			if (this.isPromotion) {
				this.getBullet()
			}
		},
		methods: {
			getVipDetail() {
				let identify = this.ident
				bksFunctionInfo({
					identify
				}).then(res => {
					this.info = res.data
				})
			},
			getBullet() {
				const pages = getCurrentPages()
				const bks_bullet = this.bks_bullet
				bksFunctionInfo({
					identify: this.ident
				}).then(res => {
					if (res.data) {
						// const time = new Date(res.data.gmtModified).getTime()
						const time = new Date().getTime()
						if (bks_bullet.length) {
							let state = true
							for (let i in bks_bullet) {
								if (bks_bullet[i].route == pages[0].route) {
									if (bks_bullet[i].time != time) {
										this._showOverlay = true
										this.info = res.data
									}
									state = false
								}
							}
							if (state) {
								this._showOverlay = true
								this.info = res.data
							}
							this.assignArr(bks_bullet, {
								route: pages[0].route,
								time: time
							});
						} else {
							this._showOverlay = true
							this.info = res.data
							this.assignArr(bks_bullet, {
								route: pages[0].route,
								time: time
							})
						}
					} else {
						this._showOverlay = false
						this.assignArr(bks_bullet, {
							route: pages[0].route,
							time: ''
						})
					}
				})
			},
			assignArr(arr, obj) {
				if (arr.length) {
					let state = true
					for (let i in arr) {
						if (arr[i].route == obj.route) {
							state = false
							if (arr[i].time != obj.time) {
								arr[i].time = obj.time
							}
						}
					}
					if (state) {
						arr.push(obj)
					}
				} else {
					arr.push(obj)
				}
				uni.setStorageSync('bks_bullet', JSON.stringify(arr))
			},
			onClickHide() {
				this._showOverlay = false
			},
			onClick() {
				if (this.ident == 'POP0002') {
					try {
						const sys = uni.getSystemInfoSync()
						if (sys.platform == 'ios') {
							uni.showToast({
								title: 'ios暂不支持',
								icon: 'none'
							})
						} else {
							this.onClickHide()
							this.$pageTo('/bks/mine/vip/index')
						}
					} catch (e) {
						//TODO handle the exception
					}
					// this.onPay()
				} else {
					this.linkTo()
				}
			},
			// 立即开通
			onPay() {
				try {
					const sys = uni.getSystemInfoSync()
					if (sys.platform == 'ios') {
						return
					}
					const that = this
					orderPay().then(res => {
						const {
							weChat: {
								timeStamp,
								nonceStr,
								packageValue,
								signType,
								paySign
							}
						} = res.data
						wx.requestPayment({
							timeStamp,
							nonceStr,
							package: packageValue,
							signType,
							paySign,
							success(res) {
								wx.showToast({
									title: '开通成功',
									icon: 'none',
									duration: 2000,
									success() {
										const userInfo = uni.getStorageSync('bw_bks_user') || {}
										userInfo.isVIP = true
										try {
											uni.setStorageSync('bw_bks_user', userInfo)
										} catch (e) {}
										console.log(11111)
										that.triggerEvent('click')
										that.onClickHide()
									}
								})
							},
							fail(res) {
								console.log(res);
							}
						})
					})

				} catch (e) {
					//TODO handle the exception
				}
			},
			linkTo() {
				let {
					info
				} = this
				const jumpUrl = info.list[0].jumpUrl
				if (jumpUrl.indexOf('close') != -1) {
					if (jumpUrl.indexOf('close:') != -1) {
						let title = jumpUrl.split(':')[1]
						wx.showToast({
							title,
							icon: 'none'
						})
					}
				} else if (jumpUrl.indexOf('/') != -1) {
					this.$pageTo(jumpUrl)
				}
				this.onClickHide()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		height: 100%;
		text-align: center;
	}

	.wrapper .bg {
		width: 630rpx;
		height: 723rpx;
	}

	.wrapper .show-box {
		height: 270rpx;
		overflow-y: auto;
		padding: 0 20rpx;
	}

	.wrapper .maxHeight {
		max-height: 270rpx;
		overflow-y: auto;
	}

	.wrapper .btn-img {
		margin: 0 auto;
		margin-top: 40rpx;
		width: 360rpx;
		height: 76rpx;
	}

	.wrapper .content {
		position: absolute;
		left: 0;
		bottom: 70rpx;
		width: 630rpx;
		line-height: 40rpx;
	}

	.wrapper .bg1 {
		width: 498rpx;
		height: 634rpx;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
		padding-top: 208rpx;
	}

	.wrapper .bg1 .btn-img {
		width: 284rpx;
		height: 78rpx;
		margin: 0 auto;
	}
</style>